import { useDebounceFn, useWindowSize } from '@vueuse/core'
import { onMounted, onUnmounted, ref } from 'vue'

/** 大屏适配的 hooks */
export default function useScale(option: {
  targetWidth: number // 设计稿的宽度
  targetHeight: number // 设计稿的高度
}) {
  const scale = ref(1) // 获取缩放比例
  const resizeFunc = useDebounceFn(() => {
    triggerScale() // 动画缩放网页
  }, 300)

  onMounted(() => {
    triggerScale() // 动画缩放网页
    window.addEventListener('resize', resizeFunc)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', resizeFunc) // 释放
  })
  const { width, height } = useWindowSize()

  function getScale() {
    const w = width.value / option.targetWidth
    const h = height.value / option.targetHeight
    return Math.min(w, h)
  }
  // 大屏的适配
  function triggerScale() {
    scale.value = getScale()
  }
  return {
    scale,
  }
}
